import 'package:flutter/material.dart';

void main() {
  // 1. 运行应用程序。
  runApp(const MaterialApp(home: Main()));
}

// 2. 主应用程序类。
class Main extends StatelessWidget {
  // 3. 构造函数，包含一个关键参数，用于在Widget树中唯一标识这个Widget。
  const Main({super.key});

  static const List myColors = [
    Colors.red,
    Colors.yellow,
    Colors.green,
    Colors.blue,
    Colors.purple,
    Colors.orange,
    Colors.pink,
    Colors.cyan,
    Colors.lime,
    Colors.teal,
    Colors.amber,
    Colors.brown,
    Colors.deepOrange,
    Colors.indigo,
  ];

  // 4. 构建方法，返回一个Widget，该Widget代表应用程序的用户界面。
  @override
  Widget build(BuildContext context) {
    // 5. 返回一个Scaffold，用于定义应用程序的基本布局结构。
    return Scaffold(
      // 6. 设置应用程序的顶部栏，包括标题和背景颜色。
      appBar: AppBar(
        title: const Text(
          'ListView - 1.基础用法',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.purple,
      ),
      // 7. 设置应用程序的主体内容，包括一个Container和一个Text组件。
      body: ListView.separated(
        itemBuilder: (BuildContext context, int index) {
          return Container(
            height: 50,
            color: myColors[index],
            child: const Text('Index'),
          );
        },
        separatorBuilder: (BuildContext context, int index) {
          return Container(
            height: 2,
            color: myColors[index],
            margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
          );
        },
        itemCount: myColors.length,
      ),
    );
  }
}
